<html lang="en">
        <head>
            <title>000</title>
            <meta charset="utf-8">
            <style>
                html, body{
                    margin: 0;
                    padding: 10px;
                    background-color: aqua;
                    display: flex;
                    flex-wrap: wrap;
                }
                h3{
                    width: 100%;
                }
                .box{
                    width: 150px;
                    height: 150px;
                    margin: 50px;
                    display: inline-block;
                    box-sizing: border-box;
                }
                /*连字断行*/
                #c_20_1{
                    width: 350px;
                    border: 20px solid rgba(100, 100, 100, 0.5);
                    hyphens: auto;
                    -webkit-hyphens: auto;
                }
                /*插入换行*/
                #c_21_1 li{
                    display: inline;
                }
                #c_21_1 li::after{
                    content: "\A";
                    white-space: pre;
                }
                /*文本行的斑马条纹*/
                #c_22_1{
                    width: 350px;
                    height: auto;
                    border: 20px solid rgba(100, 100, 100, 0.5);
                    word-break: break-all;

                    background-size: auto 4em;
                    background-image: linear-gradient(tan 50%, transparent 0);
                    background-clip: content-box;
                    padding: 0;
                }
                #c_22_1 span{
                    line-height: 2em;
                }

                /*tab 宽度*/
				#c_23_1{
					width: 500px;
				}
                #c_23_1 li{
                    white-space: pre;
                }
                #c_23_1 li:nth-child(2){
                    tab-size: 2;
                }

				#test{
					border: 1px solid;
					image-orientation: 30deg;
				}

                #c_26_1{
                    font-size: 3em;
                }
                #c_26_1>span:nth-of-type(1){
                    text-decoration: none;
                    background-image: linear-gradient(0deg, tan 3px, transparent 0);
                    background-position: 0 -10px;
                    text-shadow: 2px 2px 2px aqua, -2px 2px 2px aqua;
                }
                #c_26_1>span:nth-of-type(2){
                    text-decoration: none;
                    background-image: radial-gradient( 60% 100% at 50% 0, transparent 90%, red 0, red 99%, transparent 0);
                    background-size: 30px 15px;
                    background-position: 0 calc(100% - 5px); 
                    background-repeat: repeat-x;
                    text-shadow: 2px 2px 2px aqua, -2px 2px 2px aqua;
                    
                }
                #c_26_1>span:nth-of-type(3){
                    text-decoration: none;
                    background-image: radial-gradient( 27% 100% at 25% 100%, transparent 70%, red 70%, red 100%, transparent 0),
								radial-gradient( 27% 100% at 75% 0%, transparent 70%, red 70%, red 100%, transparent 0);
                    background-size: 32px 4px, 32px 4px;
                    background-repeat: repeat-x;
                    background-position: 0 calc(100% - 3px), 0 100%; 
                    
                }

				#c_27_1>span:nth-of-type(1){
					font-size: 60px;
					font-weight: bold;
					color: tan;
					text-shadow: 0 0.05em 0.05em rgba(17, 17, 17, 0.5);
				}
				#c_27_1>span:nth-of-type(2){
					font-size: 60px;
					font-weight: bold;
					color: tan;
					text-shadow: 0 -0.05em 0.05em rgb(255, 255, 255);
				}
				#c_27_2{
					font-size: 60px;
					transition: 1s;
				}
				#c_27_2:hover{
					color: rgba(0, 0, 0, 0.5);
					text-shadow: 0 0 20px black, 0 0 20px black;
				}

				@font-face{
					font-family: "test";
					src: url(./font/test.otf);
				}
				#font_test{
					font-family: "TEST";
				}
				#font_test::after{
					content: '\2';
					font-size: 100px;
				}

                #c_34{
                    width: 100px;
                    height: 200px;
                    border: 1px solid;
                    overflow: auto;
                    background-color: white;

                    background-image:
                                    linear-gradient(180deg, white 15px, transparent 80%) ,
                                    linear-gradient(0deg, white 15px, transparent 80%) ,
                                    radial-gradient(70% 15px at 50% 0,rgba(0, 0, 0, 0.4) 0, transparent 100%),
                                    radial-gradient(70% 15px at 50% 100%,rgba(0, 0, 0, 0.4) 0, transparent 100%);
                    background-size: 100% 70px, 100% 70px, 100% 15px, 100% 15px;
                    background-position: top center, bottom center, top center, bottom center;
                    background-repeat: no-repeat;
                    background-attachment: local, local, scroll, scroll;
                }
                #c_34::-webkit-scrollbar {display: none;}

				#loader{
					position: relative;
					width: 0;
					height: 0;
					box-sizing: border-box;
					animation: loader 1.5s linear infinite;
				}
				#loader::before{
					content: "";
					display: block;
					position: absolute;
					width: 0;
					height: 0;
					box-sizing: border-box;
					animation: before 1.5s linear infinite;
					z-index: 2;
				}
				#loader::after{
					content: "";
					display: block;
					position: absolute;
					width: 0;
					height: 0;
					box-sizing: border-box;
					animation: after 1.5s linear infinite;
					z-index: 1;
				}
				@keyframes loader{
					0%{
						width: 0;
						height: 0;
						border-top: 5px solid;
					}
					12.5%{
						width: 0;
						height: 0;
						border-top: 5px solid;
					}
					25%{
						width: 100px;
						height: 5px;
						border-top: 5px solid;
					}
					37.5%{
						width: 100px;
						height: 100px;
						border-top: 5px solid;
						border-right: 5px solid;
					}
					75%{
						width: 100px;
						height: 100px;
						border-top: 5px solid;
						border-right: 5px solid;
						box-shadow: none;
					}
					87.5%{
						width: 100px;
						height: 100px;
						border-top: 5px solid;
						border-right: 5px solid;
						box-shadow: 0 -20px 0 20px yellow inset,-5px -20px 0 20px black inset;
					}
					100%{
						width: 100px;
						height: 100px;
						border-top: 5px solid;
						border-right: 5px solid;
						box-shadow: 0 -20px 0 20px yellow inset,-5px -20px 0 20px black inset;
					}
				}
				@keyframes before{
					0%{
						width: 0;
						height: 0;
						border: none;
						top: 95px;
						border-left: 5px solid;
					}
					12.5%{
						width: 5px;
						height: 95px;
						border-left: 5px solid;
						top: 0px;
					}
					50%{
						width: 5px;
						height: 95px;
						border-left: 5px solid;
						border-right: none;
						top: 0px;
					}
					62.5%{
						width: 35px;
						height: 95px;
						border-left: 5px solid;
						background-color: red;
						border-right: 5px solid;
						border-bottom: 5px solid;
						top: 0px;
					}
					100%{
						width: 35px;
						height: 95px;
						border-left: 5px solid;
						background-color: red;
						border-right: 5px solid;
						border-bottom: 5px solid;
						top: 0px;
					}
				}
				@keyframes after{
					0%{
						width: 0;
						height: 0;
						border: none;
					}
					25%{
						width: 0;
						height: 0;
						border: none;
					}
					37.5%{
						width: 0;
						height: 0;
						border: none;
						border-bottom: 5px solid;
					}
					50%{
						bottom: 0;
						right: 0;
						width: 95px;
						height: 5px;
						border-bottom: 5px solid;
					}
					62.5%{
						bottom: 0;
						right: 0;
						width: 95px;
						height: 5px;
						border-bottom: 5px solid;
					}
					75%{
						bottom: 0;
						right: 0;
						width: 95px;
						height: 45px;
						background-color: blue;
						border-bottom: 5px solid;
					}
					100%{
						bottom: 0;
						right: 0;
						width: 95px;
						height: 45px;
						background-color: blue;
						border-bottom: 5px solid;
						border-top: 5px solid;
					}
				}

				#c_35{
					position: relative;
					display: inline-block;
					height: 200px;
					width: 200px;
				}
				#c_35>div,#c_35>div>img, #c_35>img{
					width: 100%;
					height: 100%;
					position: absolute;
					overflow: hidden;
					user-select: none;
				}
				#c_35>div>img{
					filter: blur(10px);
					opacity: 0.7;
					z-index: 9;
				}
				#c_35>input{
					position: absolute;
					z-index: 10;
					margin: auto;
					width: 80%;
					left: 0;
					right: 0;
					bottom: 10px;
					display: inline-block;
				}
            </style>
        </head>
    
        <body>
            <h3>20 连字断行</h3>
            <div id="c_20_1" class="box">CSS3：hyphens. 自动出现连字符，需要使用 lang 属性 Applewatch Applewatch Applewatch is is is is is  is is Applewatchapplewatch Applewatch .</div>

            <h3>21 插入换行</h3>
            <div id="c_21_1" class="box">使用content:"\A"; : <br> <li>1123456</li><li>09876543</li></div>

            <h3>22 文本行的斑马条纹</h3>
            <div id="c_22_1" class="box"><span>使用background-clip  +  linear-gradient ： 234567890-098765432123456789098765434567890987654321234567890987654345678909876543212345678909876543456789098765432123456789098765434567890987654321234567890987654345678909876543212345678909876543456789</span></div>

            <h3>23 tab宽度</h3>
			<div id="c_23_1" class="box">css3: tab-size : 注意，必须是输入tab，有些编辑器会转换成空格

				<li>正常tab:	！</li>
				<li>控制tab:	！</li></div>
            
            <h3>26 自定义下划线</h3>
			<p id="c_26_1">ertyuiopdfghjkl;,m<span>nbvcxsertyuiol;lmnbvcdrtyuiol;.,mnbvcxsdrtyuiol,mnbvc</span>
				xdrtyuil3r3r3r3r3,m xdfyuiol,mn<span>bvcxdtyuiol,mnbvcxdtyukmn xdfghk,mnbvcvghj</span>
				> xdfghjk,mnbvcfg xdfghjk,m<span>nbvcfg xdfghjk,mnbvcfgk,m xdfghjk,mnbvcfg xdfghjk,mnb</span>vcfg xdfghjk,mnbvcfg xdfghjk,mnbvcfg xdfghjk,mnbvcfg xdfghjk,mnbvcfghjkl</p>

			<h3>27 凸版印刷效果: 假设光源在上面</h3>
			<p id="c_27_1"><span>TT T T</span> - <span>TT T T</span></p>
			<p id="c_27_2">文字发光： <span> G l o w </span></p>

			<h3>字体开发测试</h3>
            <p id="font_test">haha</p>
            
            <h3>34 滚动提示 background-attachment: local, local, scroll, scroll;</h3>
            <ul id="c_34">
                <li>Java</li>
                <li>Python</li>
                <li>JavaScript</li>
                <li>C++</li>
                <li>Go</li>
                <li>Lua</li>
                <li>Swift</li>
                <li>Scheme</li>
                <li>CSS</li>
                <li>HTML</li>
                <li>Java</li>
                <li>Python</li>
                <li>JavaScript</li>
                <li>C++</li>
                <li>Go</li>
                <li>Lua</li>
                <li>Swift</li>
                <li>Scheme</li>
                <li>CSS</li>
                <li>HTML</li>
			</ul>
			
			<h3>漂亮的 loading</h3>
			<div style="width: 100%;"><div id="loader"></div></div>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<h3>35 图片对比控件</h3>
			<div id="c_35">
				<div><img src="./img/bg.jpg"/></div>
				<img src="./img/bg.jpg"/>
				<input type="range" value="100"/>
			</div>
			<script>
				let div = document.querySelector("#c_35");
				div.querySelector("input").oninput = e => {
					div.querySelector("div").style.width = e.target.value + "%";
				}
			</script>
        </body>
    </html>